<script>
export default {
  name: "HomeViewBack",
  data(){
    return {
      menus:[],
      first_menu_icon:['icon-yonghu1','icon-gerenxinxi','icon-yisheng-01','icon-datiqia','icon-shujufenxi','icon-congtikuzhongdaorutimu-1-01'],
      def_url: 'user_list'
    }
  },
  created() {
    this.getMenus();
    //取出当前应被激活的菜单
    const url = sessionStorage.getItem("clicked_url");
    if(url){
        this.def_url = url;
    }
  },
  computed:{
    adminName(){
      return sessionStorage.getItem("uname");
    }
  },
  methods:{
    exit(){
       //清空token，并跳转到登陆页
       sessionStorage.removeItem("token");
       this.$router.push('/login');
    },

    getMenus(){
        const _this = this;
        this.$http.get("menus").then(function(res){
            _this.menus = res.data.data;
        })
    },

    changeActiveMenu(url){
      if(url!=null && ""!=url){
        this.def_url = url;
        sessionStorage.setItem("clicked_url",url);
      }
    }
  }
}
</script>

<template>
  <el-container class="contain">
    <el-header class="header">
      <div class="header-left" >
        <img src="../assets/imgs/logo.png" class="logo"  >
         　具身语言认知老化评测系统
      </div>

      <div class="header-right">
        管理员 {{adminName}}　
        <el-button @click="exit" size="small" type="primary" style="margin-right: 10px">退出</el-button>
      </div>


    </el-header>
    <el-container>
<!------------------------------------- 侧边导航栏  ------------------------------------------->
      <el-aside width="200px" class="aside">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            router
            :default-active = "this.def_url"
            active-text-color="#ffd04b">


              <el-submenu :index="menu.id+''" v-for="(menu,index) in menus" :key="menu.id">
                <template slot="title">
                  <i :class="'iconfont ' + first_menu_icon[index]" style="color: white;margin-right: 10px"></i>
                  <span>{{menu.name}}</span>
                </template>

                          <el-menu-item @click="changeActiveMenu(son.url)" :index="son.url" v-for="son in menu.son_menus" :key="son.id">
                            <template slot="title">
                              <i class="el-icon-location"></i>
                              <span>{{ son.name }}</span>
                            </template>
                          </el-menu-item>

              </el-submenu>

        </el-menu>
      </el-aside>



      <el-main class="main">
          <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.contain{
  height: 100%;
}

.header{
  width: 100%;
  height: 500px;
  background-color: #666666;
  display: flex;
  justify-content: space-between;
  color: white;
  align-items: center;
  font-size: 14px;
  padding: 0px;
}
.header-left{
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.logo{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}


.aside{
  width: 200px;
  background-color: #545C64;
}
.el-menu{
  border: 0px;
}

.main{
  width: 100%;
}
</style>